<template>
  <view class="wrapper">
			
		<!--底部抽屉-录音-->
		<tui-bottom-popup :show="bottomPopup" :radius="true" @close="hideModal">
			<view class="region-box">
				<view class="reset" @tap.stop="resetRecord"   v-if="judge === 3 || judge === 4">
					<image src="/static/images/post/reset_record.png" mode="aspectFill"></image>
				</view>
				<view class="record" @tap.stop="perms_record" >
					<view class="record_time">
						<view class="" v-if="judge === 4 || judge === 5">{{curTime}}/</view>
						<view class="">
							{{showRecordTime}}
						</view>
					</view>
					
					<image :src="recordImg" mode="aspectFill"></image>
					<view class="prompt" v-if="1 === judge">点击录音</view>
					<view class="prompt" v-else-if="2 === judge">点击暂停</view>
					<view class="prompt" v-else-if="3 === judge">点击继续</view>
					<view class="prompt" v-else-if="4 === judge">点击试听</view>
					<view class="prompt" v-else="5 === judge">停止播放</view>
					<view class="tip" v-if="judge !== 5 && judge !== 4">最高录音时长为60秒</view>
				</view>
				<view class="save" @tap.stop="saveRecord" v-if="judge === 3 || judge === 4">
					<image :src="upRecordImg" mode="aspectFill"></image>
				</view>	
			</view>
		</tui-bottom-popup>
		<!--底部抽屉-录音-->
		
		<form @submit.stop="formSubmit" @reset="reset">
			<input type="text" hidden=true name="cateid" :value="selectedCir.id ? selectedCir.id:currentCir.id" />
			<input type="text" hidden=true name="images" :value="thumbTempFilePath && voicePath?'':images" maxlength="-1"/>
			<input type="text" hidden=true name="video_data" :value="thumbTempFilePath?JSON.stringify(video_data):'' " maxlength="-1"/>
			<input type="text" hidden=true name="audio_data" :value="voicePath?JSON.stringify(audio_data):'' " maxlength="-1"/>
			<view class="intro">
				<textarea placeholder="来分享你的新鲜事儿吧~"  cols="40" rows="40" maxlength="150"  name="body"  v-model="val">
				</textarea>
				<view class="count">
					<p :class="{'remnant':remnant!=0,'zero':remnant==150}">{{remnant}}</p>
					<view class="">/150</view>
				</view>
			</view>
			
		<!-- 分享作品 -->
		<view class="up-works-area" v-if="Object.keys(selectedWorks).length > 0 && use_share">
			<view class="works-area">
				<view class="w-cover"><image :src="selectedWorks.cover" mode="aspectFill"></image></view>
				<view class="w-body">
					<view class="w-name">{{selectedWorks.name}}</view>
					<view class="w-intro">{{selectedWorks.intro}}</view>
				</view>
			</view>
			<view class="works-cancel" @tap="worksCancel">
				 <image src="/static/images/index/cancle.png" mode=""></image>
			</view>
		</view>
		<!-- 分享作品 -->
		
		
		<view class="upload-area">
			
			<!-- images-area -->
			<view class="upload-images-area" v-if="!thumbTempFilePath && !voicePath && !Object.keys(selectedWorks).length" >
				<!-- 展示相集 -->
				<view class="images-area" >
					<view class="image-item" v-if="images.length"  v-for="(item,index) in images" @click="viewImage" :data-url="images[index]" :key="index" >
						<image :src="item" mode="aspectFill"></image>
						<view class="delete-icon" @tap.stop="delImg" :data-index="index">
							<image src="/static/images/post/delete-image.svg" mode=""></image>
						</view>
					</view>
					<!-- 上传相集 -->
					<view class="upload" @tap="chooseImages" v-if="images.length < 9" >
						<view class="notimage" v-if="!images.length" >
							<image src="/static/images/post/upimage.svg" mode="" ></image>
							<view class="up-desc" >图片</view>
						</view>
						<view class="haveimage" v-else="images.length">
							<image src="/static/images/post/continue_add_img.svg" mode="" ></image>
						</view>
						
					</view>
				</view>
			</view>
			
			<!--video-area  -->
			<view class="upload-video-area" v-if="!images.length && !voicePath && !Object.keys(selectedWorks).length">
				<!-- 展示视频缩略图 -->
				<view class="video-area" >
					<view class="video-item" v-if="thumbTempFilePath">
						<image :src="thumbTempFilePath"></image>
						<view class="delete-icon" @tap.stop="delVideo" :data-index="index">
							<image src="/static/images/post/delete-image.svg" mode="aspectFill"></image>
						</view>
					</view>
					<!-- 上传视频 -->
					<view class="upload" @tap="chooseMedia" v-if="!thumbTempFilePath && !voicePath && use_video" >
						<image src="/static/images/post/upvideo.svg" mode=""></image>
						<view class="up-desc">视频</view>
					</view>
				</view>
			</view>
			
			<!--audio-area  -->
			<view class="upload-audio-area" v-if="!images.length && !thumbTempFilePath && !Object.keys(selectedWorks).length ">
				<view class="video-area" >
					<!-- 播放音频 -->
					<view class="audeo-item" v-if="voicePath">						<multi-audio :audioId="'a'+index" :audioData="audio_data" ></multi-audio>
						<view class="cancel" @tap.stop="recordCancel">
							 <image src="/static/images/index/cancle.png" mode="aspectFill"></image>
						</view>
					</view>
					
					<!-- 录制音频 -->
					<view class="upload" @tap.stop="showModal" v-if="!thumbTempFilePath && !voicePath && use_audio" >
						<image src="/static/images/post/record.png" mode=""></image>
						<view class="up-desc">语音</view>
					</view>
				</view>
			</view>
			
			<!-- create-area -->
			<view class="upload-create-area" v-if="!images.length && !thumbTempFilePath && !voicePath && !Object.keys(selectedWorks).length && use_share" >
				<view class="create-area">
					
					<view class="upload" @tap="chooseWorks" v-if="!thumbTempFilePath && !voicePath " >
						<image src="/static/images/post/works.svg" mode=""></image>
						<view class="up-desc">作品</view>
					</view>
				</view>
			</view>
			
			
		</view>
		
		
		<view class="select-circle" @tap.stop="selectCir">
			<view class="select">
				<image src="/static/images/icon/circle_active.png" mode="" class="circle-icon"></image>
				<view class="" v-if="selectedCir.name">{{selectedCir.name}}</view>
				<view v-else-if="currentCir.name" >{{currentCir.name}}</view>
				<view v-else>选择圈子</view>
			</view>
			<image src="/static/images/user/godetail.png" mode=""></image>
		</view>
		<button class="post_btn"   open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true" v-if="!phone" >发布</button>
		<button class="post_btn"   @tap.stop="clickpost" v-else>发布</button>
		<!-- <button class="post_btn" form-type="submit"  >发布</button> -->
	</form>
  </view>
</template>
 
<script>
	import Vue from 'vue'
	import {mapState} from 'vuex'
	import api from '../../common/api.js'
	import graceChecker from '../../common/graceChecker.js'
	
	// 引入录音不同状态下的图标
	import startRecord from '../../static/images/post/start_record.png'
	import Recording from '../../static/images/post/puase_record.png'
	import puaseRecord from '../../static/images/post/continue_record.png'
	import audition from '../../static/images/post/audition.png' //点击试听
	import playing from '../../static/images/post/playing.png' //试听ing
	import saveRecord from '../../static/images/post/save_record.png'
	import uploadRecord from '../../static/images/post/upload_record.png'
	
	const recorderManager = uni.getRecorderManager();
	// const bgm = uni.getBackgroundAudioManager()

	export default {
		
		data() {
			return {
				// 获取使用音频，视频，作品权限
				use_video:this.use_video,
				use_audio:this.use_audio,
				use_share:this.use_share,
				
				// 获取订阅消息模板id
				post_tlid:this.post_tlid,
				comment_tlid:this.comment_tlid,
				reward_tlid:this.reward_tlid,
				
				val: "", //输入内容
				currentCir:{//当前圈子
					id:null,
					name:null
				},
				selectedCir:[], //发布的圈子
				images:[],	//相集
				upload_api: this.uploadApi ,//图片上传url
				repost:1,
				
				// video-part
				uploadVideo_api: this.uploadVideo_api ,//视频上传url
				videoSrc: '', // 视频资源路径
				thumbTempFilePath: '', // 视频缩略图地址
				videoFile: '',
				video_data:{
					fileType:'',
					size:null,
					duration:null,
					width:null,
					height:null,
					videoSrc:'',// 视频资源路径
					thumbTempFilePath:'' // 视频缩略图地址
					},
					
				// audio-part
				recordTime:0,//记录录音时长
				maxTime: { // 录音最大时长，单位秒
					type: Number,
					default: 2
				},
				currentTime: 0, //当前音频的播放位置
				duration: 0,//录音时长
				isplay:false,
				uploadAudio_api:this.uploadAudio_api ,//音频上传
				tempVoicePath:'', //临时录音文件
				voicePath: '',    //保存上传的音频路径
				recordImg:startRecord,  //录音操作：开始，继续，暂停
				upRecordImg:saveRecord,  //录音上传：停止录音，上传录音,试听录音
				audio_data:{
					size:null,
					duration:null,
					voicePath:''
				},
				bottomPopup: false,
				// audio-part
				
				// 作品-- 诗歌 小说 文章
				Share_id:null,
				Share_type:'',
				selectedWorks:{} ,//选择的作品
				
				//判断发布后跳转圈子
				issubscribe:true,
				currentPage:'',
				prevPage:'',
				
				// 发布提交
				f_id:''
			};
		},
		
		computed: {
			
			...mapState(['phone']),
			
			remnant() {//分享描述字数
				return  this.val.length;
			},
			judge() {//判断录音状态
				if(this.recordImg == startRecord) {
					return 1
				}else if(this.recordImg == Recording) {
					return 2
			}else if(this.recordImg == puaseRecord){
					return 3
				}else if(this.recordImg == audition){
					return 4
				}else if(this.recordImg == playing){
					return 5
				}
			},
			
			curTime:{//录音时长转化格式
				set() {},
				get() {
					if(this.duration){
						var curTime = this.currentTime;
						if (curTime < 10) {
									curTime = '00:0' + curTime;
							}
							if (curTime >= 10) {
								if (curTime >= 60) {
									var c = parseInt(curTime / 60)
									var d = curTime % 60
									if (d < 10) {
										d = '0' + d;
									}
									if ( c < 10) {
											c = '0' +  c;
									}
									curTime = c + ':' + d;
								} else {
									curTime = '00:' + curTime;
								}
							} 
						return curTime
					}
					return '00:00';
				}
			},
			
			showRecordTime() {//记录录音时长
				var strs = "";
				var m = Math.floor(this.recordTime/60);
				if(m<10) strs = "0"+m;
				
				var s = this.recordTime%60;
				strs += (s<10) ? ":0"+s : ":"+s;
								
				return strs
			}
		},
		
		async onLoad(p) {
			console.log('jjjjjjjjjjjjjjjjj');
			
			// 获取圈子id
			this.currentCir.id =  getApp().globalData.curCirid
			this.currentCir.name = getApp().globalData.curCirname
			
			// 初始化录音播放器
			this.bgm = uni.getBackgroundAudioManager()
			this.bgm.onTimeUpdate( () => { 
				this.currentTime = parseInt(this.bgm.currentTime)
			})
			
			recorderManager.onStop(res => {//录音停止事件，会回调文件地址
				clearTimeout(this.timeObj); //清除计时器
				this.duration = res.duration
				this.tempVoicePath = res.tempFilePath
				this.audio_data.size = res.fileSize
				this.audio_data.duration = res.duration
				this.upRecordImg = uploadRecord
				this.recordImg = audition
			})
			
		},
		
		async onShow() {//判断是否以获取到token
			if(!Vue.prototype.token) {
				await api.GetMe()
				this.use_video = Vue.prototype.use_video
				this.use_audio = Vue.prototype.use_audio 
				this.use_share = Vue.prototype.use_share 
				
				this.post_tlid = Vue.prototype.post_tlid
				this.comment_tlid = Vue.prototype.comment_tlid
				this.reward_tlid = Vue.prototype.reward_tlid 
			}
			this.repost = 1
			uni.$off('selectedCir')
			uni.$off('selectedWorks')
			uni.$once('selectedCir',(res) => {//监听选择发布圈子事件
				this.selectedCir = res
			})
			
			uni.$once('selectedWorks',res => {
				this.selectedWorks = res
				this.Share_id = res.id
				this.Share_type = res.type
			})
		},
		
		onHide() {
			console.log('onhide');
			getApp().globalData.curCirid =''
			getApp().globalData.curCirname = ''
			this.resetRecord()
		},
		
		methods:{

			doplay(){//播放录音
				this.bgm.src = this.voicePath
				this.bgm.title = '语音'
				this.bgm.seek(this.currentTime)
				this.bgm.onEnded(() => {
					this.isplay = false
				}) 
			},
			
			recordCancel() {//清空录音
				this.voicePath = ''
				// this.bgm.src = ''
				this.currentTime = 0
				this.recordTime = 0
				this.audio_data = {}
				this.recordImg = startRecord
				this.upRecordImg = saveRecord
			},
			
			resetRecord() {//重新录音
				this.recordTime = 0
				clearTimeout(this.timeObj); //清除计时器
				this.tempVoicePath = ''
				this.currentTime = 0
				this.recordImg = startRecord
				this.upRecordImg = saveRecord
			},
			
			worksCancel() {//清空作品
				this.selectedWorks = {}
				this.Share_id = ''
				this.Share_type = ''
			},
			
			async saveRecord() {//保存 or 上传录音
				if(this.upRecordImg == saveRecord) {//停止录音
					recorderManager.stop()
				}else {//上传录音
					await this.uploadAudio()
				}
			},
			
			showModal() {//录音页面弹窗
				this.bottomPopup = true;
			},
			
			hideModal() {//隐藏录音页面弹窗
				this.bottomPopup = false;
			},
			
			perms_record() {//判断是否有录音权限再进行录音
				const _this = this;
				uni.getSetting({// 获取是否具备录音授权权限信息
					success(res) {
						console.log(res);
						if (res && res.authSetting && res.authSetting.hasOwnProperty('scope.record')) {
							if (res.authSetting['scope.record']) {
								_this.record();
							} else { // 拒绝授权，打开授权设置
							console.log('=================');
							uni.showModal({
								title:'是否授权录音权限',
								content:'需要获取您的录音权限，请确认授权，否则语音功能将无法使用',
								success(tip) {
									if(tip.confirm) {
										uni.openSetting({
											success(data) {
												if (data.authSetting['scope.record'] === true) {
													uni.showToast({
														title: '授权成功',
														icon: 'success',
														duration: 1000
													})
													_this.recordImg === startRecord
												}
											}
										})
									}else {
										_this.recordImg === startRecord
										uni.showToast({
											title: '授权失败',
											icon: 'none',
											duration: 1000
										})
										
									}
								}
							})
								
							}
						} else {
							uni.authorize({
								scope: 'scope.record',
								success(res) {
									uni.showToast({
										title: '授权成功',
										icon: 'success',
										duration: 1000
									})
									_this.recordImg === startRecord
								},
								fail() {
										console.log("录音授权失败")
								}
							})
						}
					},
					fail() {
						console.log('授权失败');
					}
				})
			},
			
			record() {//调用录音api--开始录音
				var _this = this
				recorderManager.onError(res => {
					_this.recordImg = startRecord
				})
				if(this.recordImg === startRecord) {
					console.log('开始录音');
					this.recordTime = 0;
			    recorderManager.start({
						duration: 60000,
						format: 'mp3',
						sampleRate: 22050,
					});
					_this.timeObj = setInterval(function() {
						_this.recordTime ++;		
						if(_this.recordTime  == _this.maxTime) recorderManager.stop()
					},1000);
					this.recordImg = Recording
				}else if (this.recordImg === Recording) {
					console.log('暂停录音');
					recorderManager.pause()
					clearTimeout(this.timeObj); //清除计时器
					this.recordImg = puaseRecord
		    }else if(this.recordImg == puaseRecord) {
					console.log('继续录音');
					recorderManager.resume()
					_this.timeObj = setInterval(function() {
						_this.recordTime ++;		
						if(_this.recordTime  == _this.maxTime) recorderManager.stop()
					},1000);
					this.recordImg = Recording
				}else if(this.recordImg == audition){//试播放录音
					this.bgm.src = this.tempVoicePath
					this.bgm.title = '语音'
					this.recordImg = playing
					this.bgm.play()
					this.bgm.onEnded(res => {
						console.log('停止录音');
						this.recordImg = audition
						this.curTime = 0
						this.currentTime = 0
						this.isplay = false
					})  
					this.bgm.onError((res) => {
						console.log(res.errMsg);
						console.log(res.errCode);
					});
				}else if(this.recordImg == playing){//停止播放
					this.recordImg = audition
					this.bgm.stop()
					this.recordImg = audition
					this.currentTime = 0
					this.curTime = 0 
					// this.bgm.onStop(() =>{
					// 	console.log('老子不放了');
					// 	this.recordImg = audition
					// 	this.currentTime = 0
					// 	this.curTime = 0
					// 	this.isplay = false
					// })
				}
			},
			
			uploadAudio() {//上传本地录音文件到服务器
				var that = this
				uni.showLoading({
					title:'录音上传中'
				})
				uni.uploadFile({
					url:that.uploadAudio_api,
					filePath:that.tempVoicePath,
					name:'file',
					fileType: 'audio',
					success:res => {
						let vdata = JSON.parse(res.data)
						that.audio_data.voicePath = vdata.file_path
						that.voicePath = vdata.file_path
						console.log(that.audio_data);
						console.log(that.voicePath);
						uni.hideLoading()
						uni.showToast({
							title:'上传成功',
							duration:800
						})
						that.bottomPopup = false;
					}
				})
			},
			
			selectCir() {//选择发布圈子
				uni.navigateTo({
					url: '/pages/post/comps/category'
					
				});
			},
			
			chooseWorks() {//选择发布作品
				uni.navigateTo({
						url: '/pages/post/comps/workscategory'
					});
				},
			
			async getPhoneNumber (e) {//手机号授权
			　　if(e.detail.errMsg=="getPhoneNumber:ok"){
			      let res = await api.GetUserPhone(e.detail.encryptedData,e.detail.iv)
						let sres = await api.SetUserPhone(res.purePhoneNumber)
						if(sres.err == 0) {
							this.$store.commit('setPhone',res.purePhoneNumber)
							uni.showToast({
								title:sres.msg,
								duration:800
							})
						}
				}else{
			        console.log('用户拒绝了手机号授权') ;   
			    }
			},
			
			// 开启订阅消息
			clickpost() {
				var that = this
				var tmpIdList = [this.post_tlid,this.reward_tlid,this.comment_tlid]
				uni.requestSubscribeMessage({
					 tmplIds: [...tmpIdList],
					 success (res) {
							console.log('res',res)
							let f_id = that.selectedCir.id ? that.selectedCir.id:that.currentCir.id
							let body = that.val
							let f_images = that.thumbTempFilePath && that.voicePath?'': that.images
							let f_video_data = that.thumbTempFilePath?JSON.stringify(that.video_data):''
							let f_audio_data = that.voicePath?JSON.stringify(that.audio_data):''
							let data = {cateid:f_id,body:body,images:f_images,video_data:f_video_data,audio_data:f_audio_data,}
							that.formSubmit(data)
							console.log('data',data);
					 },
					 fail:(res) => {
							console.log(res)
					 }
				})
			    // 获取用户的当前设置，判断是否点击了“总是保持以上，不在询问”
			    // wx.getSetting({
			    //     withSubscriptions:true,  //是否获取用户订阅消息的订阅状态，默认false不返回
			    //    success(res) {
							//  console.log('scope.subscribeMessage',res.authSetting);
			    //       if(res.authSetting['scope.subscribeMessage']) { //用户点击了“总是保持以上，不再询问”
			    //          uni.openSetting({ // 打开设置页
			    //            success(res) {
			    //              console.log(res.authSetting)
			    //            }
			    //          });
			    //       }else { // 用户没有点击“总是保持以上，不再询问”则每次都会调起订阅消息
			    //          // var templateid = that.setting.templateid.map(item => item.tempid)
									 
			    //       }
			    //    }
			    // })
			},
			
			async formSubmit(e) {//表单提交--发布打卡
			console.log('e',e);
				var _that = this
					if(!this.repost) {
						uni.showToast({ title: '勿重复提交 ', icon: "none" });
						return 
					}
					var rule = [
						{name:"body", checkType : "notnull", errorMsg:"请填写发布内容"},
						{name:"cateid", checkType : "int", checkRule:"0,", errorMsg:"请选择发布圈子"},
					];
					//进行表单检查
					var checkRes = graceChecker.check(e, rule);
					if(!checkRes){
						uni.showToast({ title: graceChecker.error, icon: "none" });
						return 
					}
					this.repost = 0 
					uni.showLoading({
						title:'提交中'
					});
					var {cateid,body,images,video_data,audio_data} = e
					console.log(images);
					var res = await api.CreatePost(cateid,body,images,'',video_data,audio_data,'',this.Share_type,this.Share_id)
					if(res.err == 0)  {
						uni.hideLoading()
						uni.showToast({
							title:'发布成功',
							icon:'success',
							duration:800
						}) 
						// 发布后，清空数据
						uni.navigateTo({
							url:'/pages/circle/comps/Detail?id='+ cateid
						})
						this.val = ''
						this.currentCir = []
						this.selectedCir = []
						this.images = []
						this.tempVoicePath = ''
						this.voicePath = ''
						this.videoSrc = ''
						this.video_data = {}
						this.audio_data = {}
						this.recordCancel()
						this.worksCancel()
					}
			},
			
			viewImage(e) {//预览图片
				uni.previewImage({
					urls: this.images,
					current: e.currentTarget.dataset.url
				});
			},
			
			delImg(e) {//删除图片
				this.images.splice(e.currentTarget.dataset.index, 1)
				if(this.images.length == 0) {
					this.images = []
					this.thumbTempFilePath = ''
					// this.video_data = {}
				}
			},
			
			chooseImages() {//上传相集images
					var _self = this
					uni.chooseImage({
						count: 9 - _self.images.length,//默认1
						sizeType: ['original','compressed'], //可以指定是原图还是压缩图，默认二者都有 'original', 'compressed'
						sourceType: ['album','camera'],  //从相册选择或者拍照 'album','camera'
						success: (res) => {
							console.log(res);
							res.tempFilePaths.forEach((item,index)=>{
								uni.showLoading({title:"上传中"});
								var uploadTask = uni.uploadFile({
									url: _self.upload_api,
									// url:'http://bbtest.test/api/upload',
									filePath: item,
									fileType: 'image',
									name: 'file',
									dataType: 'json',
									success: function (uploadFileRes) {
										// 上传成功后返回服务器端保存的路径
										var jsondata = JSON.parse(uploadFileRes.data)
										if( jsondata.err ==0 ){
											_self.images.push(jsondata.file_path)
											uni.hideLoading();
											uni.showToast({
												title: jsondata.msg,
												duration:800
											})
										}else{
												uni.showToast({
													title:jsondata.msg,
													icon:'none'
												})
											}
										}
								 });
							})
						}
					});
			},
			
			delVideo(e) {//删除图片
				this.thumbTempFilePath = ''
				this.video_data = {}
			},
			
			chooseMedia() {//上传视频
					var _self = this
					uni.chooseMedia({
						count: 1,//最多可以选择的文件个数,默认9
						mediaType: ['image', 'video'], //文件类型：只能拍摄视频或从相册选择视频
						sourceType: ['album','camera'],  //从相册选择或者拍摄 'album','camera'
						maxDuration:30,//相机拍摄最大时长为30S
						camera: 'back', //默认摄像头是后置摄像头
						success: (res) => {
							console.log(res.tempFiles);
							res.tempFiles.forEach((item,index)=>{
								console.log(item);
								this.video_data.size = item.size,
								this.video_data.duration = item.duration,
								this.video_data.width = item.width,
								this.video_data.height = item.height,
								this.video_data.fileType = item.fileType
								uni.showLoading({title:"上传中"});
								//上传视频文件
								var uploadTask = uni.uploadFile({
									url:_self.uploadVideo_api,
									name:'file',
									filePath: item.tempFilePath,
									dataType: 'json',
									success: (uploadFileRes) => {
										// 上传成功后返回服务器端保存的路径
										var jsondata = JSON.parse(uploadFileRes.data)
										console.log(jsondata)
										if( jsondata.err ==0 ){
											_self.videoSrc = jsondata.file_path
											_self.video_data.videoSrc = jsondata.file_path
											uni.showToast({
												title: jsondata.msg,
												duration:800
											})
										}else{
												uni.showToast({
													title:jsondata.msg,
													icon:'none'
												})
											}
										console.log(item.thumbTempFilePath);
										// 上传视频缩略图
										var uploadTask1 = uni.uploadFile({
											url: _self.upload_api,
											filePath: item.thumbTempFilePath,
											fileType: 'image',
											name: 'file',
											dataType: 'json',
											header: {  
												'content-type': 'multipart/form-data',  
												'Connection':'keep-alive'  
											} ,
											success: (uploadFileRes) => {
												// 上传成功后返回服务器端保存的路径
												var jsondata1 = JSON.parse(uploadFileRes.data)
												console.log(jsondata1)
												if( jsondata1.err ==0 ){
													_self.thumbTempFilePath = jsondata1.file_path
													_self.video_data.thumbTempFilePath = jsondata1.file_path,
													console.log(_self.video_data);
													uni.hideLoading();
													uni.showToast({
														title: jsondata.msg,
														duration:800
													})
												}else{
														uni.showToast({
															title:jsondata.msg,
															icon:'none'
														})
													}
												},
												fail: (res) => {
													console.log(res);
												}
										 });
										 // 上传视频缩略图
										}, 
										fail:res => {
											uni.showToast({
												title: '上传失败',
												duration:800
											})
											console.log(res);
										}
								 });
							})
						}
					});
			}
		}
	};
</script>
 
<style lang="scss" scoped>
	page {
		background: #fff;
	}
	.wrapper {
		height: 100vh;
		box-sizing: border-box;
		background-color: #fff;
	}
	.post_btn {
		margin: 0 auto;
		background-color: #1a77fe;
		color: #fff;
		width: 75%;
		margin-top: 200rpx;
		border-radius: 45rpx;
	}
	.select-circle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 10rpx;
		border-top: 1rpx solid #F3F6F5;
		border-bottom: 1rpx solid #F3F6F5;
		margin-left: 10rpx;
		margin-top: 70rpx;
		height: 55rpx;
		.select {
			display: flex;
			align-items: center;
		}
		.circle-icon {
			margin-right: 16rpx;
		}
		image {
			width: 48rpx;
			height: 48rpx;
		}
	}
	.upload-images-area {
		/* width: 750rpx;
		margin: 0 auto;
		height: 1000rpx; */
		display: flex;
		justify-content: center;
		padding: 20rpx 15rpx;
		.images-area {	
			display: flex; 
			flex-wrap: wrap;
			// width: 700rpx;
			box-sizing: border-box;
			.image-item {
				position: relative;
				width: 220rpx;
				height: 210rpx;
				margin-right: 10rpx;
				margin-bottom: 10rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
				.delete-icon {
					position: absolute;
					right: 5rpx;
					top: 5rpx;
					image {
						width: 45rpx;
						height: 45rpx;
						// background: rgba(0,0,0,.2);
					}
				}
			}
			.upload {
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				// width: 220rpx;
				// height: 210rpx;
				border-radius: 10rpx;
				margin-bottom: 10rpx;
				border: 1rpx solid #F3F6F5;
				color: #797A7E;
				font-size: 28rpx;
				.haveimage {
					width: 220rpx;
					height: 210rpx;
					image {
						width: 100%;
						height: 100%;
						border-radius: 8rpx;
					}
				}
				.notimage {
					width: 150rpx;
					height: 150rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					image {
						margin: 20rpx 0 5rpx;
						width: 45%;
						height: 40%;
					}
				}
			}
		}
	}
	.upload {
		// background: rgba(245,245,245,.8);
		background-color: #F4F4F7;
	}
	.up-works-area {
		display: flex;
		align-items: center;
		width: 700rpx;
		margin: 50rpx 0rpx 50rpx 30rpx;
		.works-area {
			display: flex;
			width: 550rpx;
			height: 100rpx;
			align-items: center;
			padding: 20rpx 15rpx;
			border-radius: 20rpx;
			background-color: #F4F4F7;
			border: 1rpx solid #F3F6F5;
			.w-cover {
				image {
					width: 170rpx;
					height: 120rpx;
					display: block;
				}
			}
			.w-body {
				display: flex;
				height: 110rpx;
				margin-left: 20rpx;
				flex-direction: column;
				font-size: 30rpx;
				.w-intro {
					font-size: 28rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden; 
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
		}
		.works-cancel {
			image {
				width: 65rpx;
				height: 65rpx;
				margin-left: 10rpx;
			}
		}
	}
	
	.upload-video-area,.upload-audio-area,.upload-create-area {
		/* width: 750rpx;
		margin: 0 auto;
		height: 1000rpx; */
		display: flex;
		
		justify-content: center;
		padding: 20rpx 15rpx;
		.video-area,.create-area {	
			display: flex; 
			flex-wrap: wrap;
			flex-direction: column;
			// width: 700rpx;
			box-sizing: border-box;
			.voice-upload {
				width: 150rpx;
				height: 100rpx;
				background-color: #ff0000;
				color: #fff;
			}
			.video-item {
				position: relative;
				width: 220rpx;
				height: 210rpx;
				margin-right: 10rpx;
				margin-bottom: 10rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
				.delete-icon {
					position: absolute;
					right: 5rpx;
					top: 5rpx;
					image {
						width: 45rpx;
						height: 45rpx;
					}
				}
			}
			.audeo-item {
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				width: 600rpx;
				.audition {
					display: flex;
					align-items: center;
					// justify-content: space-between;
					width: 530rpx;
					height: 80rpx;
					border-radius: 40rpx;
					background-color: rgba(0,0,0,0.2);
					.left {
						display: flex;
						align-items: center;
						.content {
							flex: 1;
							width: 370rpx;
							
						}
						.time {
							font-size: 24rpx;
						}
					}
					
					.play_btn {
						padding-top:4rpx;
						margin-left: 20rpx;
						.play-icon {
							image {
								width: 60rpx;
								height: 60rpx;
							}
						}
					}
				}
				.cancel {
					margin-left: 8rpx;
					image {
						width: 60rpx;
						height: 60rpx;
					}
				}
			}
			.upload {
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				width: 150rpx;
				height: 150rpx;
				margin-bottom: 10rpx;
				border: 1rpx solid #F3F6F5;
				color: #797A7E;
				font-size: 28rpx;
				image {
					margin: 20rpx 0 5rpx;
					width: 45%;
					height: 40%;
				}
			}
		}
	}
	
	.intro {
		position: relative;
		padding: 20rpx;
		background-color: #fff;
		border: 2rpx solid #F3F6F5;
		image {
			width: 20rpx;
			height: 20rpx;
		}
		.count {
			display: flex;
			position: absolute;
			color: #999;
			right: 10rpx;
			bottom: 10rpx;
			.remnant {
				color: #999;
			}
			.zero{
				color: #cb143c;
			}
		}
		textarea {
			height: 300rpx;
			width: 100%;
			letter-spacing: 2rpx;
			font-size: 34rpx;
			
		}
	}
	.upload-area {
		display: flex;
		margin-top: 70rpx;
	}
/* 	.upload-area {
		display: flex;
		width: 600rpx;
		border: 2rpx solid #000000;
		box-sizing: content-box;
		background-color: #fff;
		.images-area{
			display: flex;
			box-sizing: content-box;
			width: 600rpx;
			image {
				width: 190rpx;
				height: 190rpx;
			}
			.upload {
				.solids {
					image {
						width: 190rpx;
						height: 190rpx;
					}
				}
			}
		}
		
		
	} */
/*底部抽屉样式 start*/

.region-box {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 520rpx;
	// padding: 36rpx 30rpx 40rpx;
	box-sizing: border-box;
	overflow: hidden;
	background-color: #fff;
	.reset,.save {
		image {
			width: 128rpx;
			height: 90rpx;
		}
	}
	.record {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 0 30rpx;
		font-size: 28rpx;
		image {
			width: 210rpx;
			height: 170rpx;
		}
		.record_time {
			display: flex;
			font-size: 34rpx;
			padding: 10rpx;
		}
		.tip {
			    margin-top: 40rpx;
			    color: #999;
			}
	}
	
}

.region-txt {
	width: 96rpx;
	height: 82rpx;
	background: #e9edfc;
	line-height: 82rpx;
	border-radius: 6rpx;
	font-size: 30rpx;
	color: #333;
	text-align: center;
	margin-right: 23rpx;
	margin-bottom: 24rpx;
	flex-grow: 1;
}

.region-txt:nth-of-type(6n) {
	margin-right: 0;
}

.grow {
	flex-grow: 0;
}

.active {
	background: #5677fc;
	color: #fff;
}

/*底部抽屉样式 end*/
	
</style>